<html>
<head>
<title>Duncan's Just-In-Time Donuts</title>

<link rel="stylesheet" type="text/css" href="donuts.css" />

<script type="text/javascript">
	function updateOrder() {
		var TAXRATE = 0.0925;
		var DONUTPRICE = 0.50;
		var numCakeDonuts = parseDonuts(document.getElementById("cakedonuts").value);
		var numGlazedDonuts = parseDonuts(document
				.getElementById("glazeddonuts").value);
		if (isNaN(numCakeDonuts))
			numCakeDonuts = 0;
		if (isNaN(numGlazedDonuts))
			numGlazedDonuts = 0;
		var subTotal = (numCakeDonuts + numGlazedDonuts) * DONUTPRICE;
		var tax = subTotal * TAXRATE;
		var total = subTotal + tax;
		document.getElementById("subtotal").value = "$" + subTotal.toFixed(2);
		document.getElementById("tax").value = "$" + tax.toFixed(2);
		document.getElementById("total").value = "$" + total.toFixed(2);
	}

	function parseDonuts(donutString) {
		numDonuts = parseInt(donutString);
		if (donutString.indexOf("dozen") != -1)
			numDonuts *= 12;
		return numDonuts;
	}

	function placeOrder(form) {
		if (document.getElementById("name").value == "")
			alert("I'm sorry but you must provide your name before submitting an order.");
		else if (document.getElementById("pickupminutes").value == ""
				|| isNaN(document.getElementById("pickupminutes").value))
			alert("I'm sorry but you must provide the number of minutes until pick-up before submitting an order.");
		else
			// Submit the order to the server
			form.submit();
	}
</script>
</head>

<body>
	<div id="frame">
		<div class="heading">Duncan's Just-In-Time Donuts</div>
		<div class="subheading">All donuts 50 cents each, cake or
			glazed!</div>
		<div id="left">
			<img src="donuttime.png" alt="Just-In-Time Donuts" />
		</div>
		<form name="orderform" action="donuts.php" method="POST">
			<div class="field">
				Name: <input type="text" id="name" name="name" value="" />
			</div>
			<div class="field">
				# of cake donuts: <input type="text" id="cakedonuts"
					name="cakedonuts" value="" onchange="updateOrder();" />
			</div>
			<div class="field">
				# of glazed donuts: <input type="text" id="glazeddonuts"
					name="glazeddonuts" value="" onchange="updateOrder();" />
			</div>
			<div class="field">
				Minutes 'til pickup: <input type="text" id="pickupminutes"
					name="pickupminutes" value="" />
			</div>
			<div class="field">
				Subtotal: <input type="text" id="subtotal" name="subtotal" value=""
					readonly="readonly" />
			</div>
			<div class="field">
				Tax: <input type="text" id="tax" name="tax" value=""
					readonly="readonly" />
			</div>
			<div class="field">
				Total: <input type="text" id="total" name="total" value=""
					readonly="readonly" />
			</div>
			<div class="field">
				<input type="button" value="Place Order"
					onclick="placeOrder(this.form);" />
			</div>
		</form>
	</div>
</body>
</html>
